(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector("#mapEcharts"));
  // 2. 指定配置和数据
  var geoCoordMap = {
    黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891],
  };

  var XAData = [
    [{ name: "" }, { name: "陕西", value: 1000 }],
    [{ name: "陕西" }, { name: "北京", value: 10 }],
    [{ name: "陕西" }, { name: "上海", value: 3000 }],
    [{ name: "陕西" }, { name: "广东", value: 4000 }],
    [{ name: "陕西" }, { name: "青海", value: 150 }]
  ];

  var planePath =
    "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
  // var planePath = 'arrow';
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];

      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord],
          value: dataItem[1].value
        });
      }
    }
    return res;
  };
  // 
  var color = ["#46bee9", "#ffa022", "#a6c84c"]; //航线的颜色
  var series = [];
  [
    ["陕西", XAData],
    // ["新疆", XNData],
    // ["宁夏", YCData]
  ].forEach(function (item, i) {
    series.push(
      {
        type: 'map',
        map: '地图',
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        },
        animation: false,
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
          };
        })
      },
      {
        name: "线",
        type: "lines",
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          // color: "red", //arrow箭头的颜色
          symbolSize: 3
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 0,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      },
      {
        name: "线",
        type: "lines",
        zlevel: 2,
        symbol: ["none", "arrow"],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: planePath,
          symbolSize: 15
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 1,
            opacity: 0.6,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      },
      {
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [50, 50],
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 9,
            },
            formatter(value) {
              return value.data.value[2]
            }
          }
        },
        itemStyle: {
          normal: {
            color: 'rgba(19, 75, 136, 0.9)', //标志颜色
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
          };
        })
      },
      {
        name: "EffectScatter",
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          brushType: "stroke"
        },
        label: {
          normal: {
            color: '#fff',
            fontSize: '10',
            show: true,
            position: "bottom",
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            }
          }
        },
        symbolSize: function (val) {
          return 8; // 圆环大小
        },
        itemStyle: {
          normal: {
            color: color[i]
          },
          emphasis: {
            areaColor: "#2B91B7"
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
          };
        })
      }
    );
  });
  var option = {
    tooltip: {
      trigger: "item",
      formatter: function (params, ticket, callback) {
        if (params.seriesType == "effectScatter") {
          return params.data.name + "：" + params.data.value[2] + '人';
        } else if (params.seriesType == "lines") {
          // return (
          //   params.data.fromName +
          //   ">" +
          //   params.data.toName +
          //   "<br />" +
          //   params.data.value
          // );
        } else {
          if(params.data == undefined) {
            return params.name;
          } else {
            return params.data.name + "：" + params.data.value[2] + '人';
          }
        }
      },
      extraCssText: 'background: #001657;padding:3px 10px 3px 10px;box-shadow: 0px 0px 7px 0px rgb(#00eeef);border: 1px solid #00eeef;',
      textStyle: {
        color: '#00FFFD', //设置文字颜色
        fontSize: 20,
        fontWeight: 'bold'
      }
    },
    // 视觉映射组件
    visualMap: {
      show: false, // 不显示控件
      min: 0,
      max: 200,
      left: '3%',
      bottom: '5%',
      calculable: true,
      // 我们需要映射地图不同省份背景色，所以指定第一列（type: 'map'）的series.data作为被映射的数据
      seriesIndex: [0],
      // 在该颜色范围内映射数据
      inRange: {
        color: ['#53DFFF', '#0C8DED']
      }
    },
    geo: {
      map: "china",
      label: {
        normal: {
          color: "#fff",
          show: false // 省份名称
        },
        emphasis: {
          show: true,
          color: "#fff"
        }
      },
      roam: true,
      //   放大我们的地图
      zoom: 1.2,
      itemStyle: {
        normal: {
          areaColor: "#142957", // 修改地图背景色
          borderColor: "#195BB9",
          borderWidth: 1
        },
        emphasis: {
          areaColor: "#2B91B7"
        }
      }
    },
    series: series
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
